<template>
	<view>
		<uni-list>
			<uni-list-item v-for="item in data" :key="item.Id" clickable @click="read(item)" :title="item.Remarks"
				:note="item.CreateTime">
				<template v-slot:footer>
					<view class="tagBox">
						<uni-tag v-if="item.Status == 0" text="未读" size="small" type="success" :circle="true"
							style="font-weight: bold; letter-spacing: 2rpx; padding: 5px;"></uni-tag>
						<uni-tag v-else text="已读" size="small" type="error" :circle="true"
							style="font-weight: bold;letter-spacing: 2rpx;padding: 5px;"></uni-tag>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
		<view class="" v-if="data.length==0" style="text-align: center;margin: 100rpx;color:#B4B4B2">
			暂无通知
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				data: [],
				pagination: {
					PageIndex: 1,
					PageRows: 30,
					SortField: "CreateTime",
					SortType: "desc",
				},
				total: 0
			}
		},
		onLoad() {
			this.getDataList()
		},
		computed: {
			...mapState(['UnreadTotal'])
		},
		methods: {
			...mapMutations(['updateUnreadTotal']),
			getDataList() {
				this.$http('Base_Message/Base_InviteMessage/GetInviteMessageList', {
					...this.pagination
				}).then(res => {
					console.log(res);
					if (res.Success) {
						this.data = res.Data
						this.total = res.Total
					}
				})
			},
			read(item) {
				if (item.Status != 0) return
				this.$http('Base_Message/Base_InviteMessage/UpdateInviteMessageData?Id=' + item.Id).then(res => {
					if (res.Success) {
						item.Status = 1
						uni.showToast({
							icon: 'none',
							title: '操作成功'
						})
						this.updateUnreadTotal(this.UnreadTotal - 1)
					} else uni.showToast({
						icon: 'none',
						title: res.Msg
					})
				})
			}
		}
	}
</script>

<style>
	.tagBox {
		display: flex;
		align-items: center;
	}
</style>